<template>
  <div class="txt-con">
    <!--左侧title和按钮外容器-->
    <div class="title-button-pot">
      <!--标题容器-->
      <div class="title-box">
        <span>{{ inspectInfo.inspectName }}</span>
      </div>
      <!--抽屉按钮-->
      <el-row class="button-box">
        <el-button type="primary" plain size="mini" @click="showInfo">检查详情</el-button>
      </el-row>

    </div>
    <!--右侧状态容器-->
    <div class="status-pot">
      <el-tag :type="getType()" size="mini">
        <i class="el-icon-success"></i>
        {{ inspectInfo.inspectStateName }}
      </el-tag>
    </div>

    <!--右侧抽屉-->
    <check-info ref="checkInfo"></check-info>
  </div>
</template>

<script>
import CheckInfo from "@/views/components/CheckInfo/index.vue";
import {subPageMixin} from "@/views/checkBusPage/mixins/subPageMixins";
import {CHECK_STATE} from "@/constantData";

export default {
  mixins: [subPageMixin],
  components: {
    CheckInfo
  },
  methods: {
    getType() {
      let {inspectInfo: {inspectState}} = this;
      inspectState = inspectState.toString()
      let type = ''
      switch (inspectState) {
        case CHECK_STATE.DRAFT:
          type = 'warning'
          break;
        case CHECK_STATE.UNDERWAY:
          type = 'success'
          break;
        case CHECK_STATE.HAVE_BEEN_FILED:
          type = ''
          break;
      }
      return type
    },
    showInfo() {
      let {inspectInfo} = this;
      this.$refs.checkInfo.showCheckInfo(inspectInfo.id)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/businessTheme.scss";

.txt-con {
  width: 100%;
  height: 100%;
  //background: pink;
  //设置内部元素位置
  display: flex;
  //设置左侧title和按钮外容器样式
  .title-button-pot {
    //不设宽度由内容撑开
    //设置高度
    height: 100%;
    // 设置标题容器样式
    .title-box {
      font-size: $second-font-size;
      //设置宽度用于迫使文本换行
      width: 380px;
      margin-top: 15px; //与上边的距离
      margin-left: 10px; //与左边框距离
    }

    // 设置按钮样式
    .button-box {
      margin-top: 25px; //与上边的距离
      margin-left: 10px; //与左边框距离
    }
  }

  // 设置右侧状态容器样式
  .status-pot {
    height: 100%;
    //设置状态样式
    ::v-deep .el-tag {
      margin-top: 16px; //与上边的距离
      box-sizing: border-box;
      padding-top: 3px;
      padding-bottom: 3px;
      height: max-content;
      border-radius: 10px; //给状态设置圆角
      font-size: $thirdly-font-size;
    }
  }
}
</style>
